import React from 'react';
import { Form, Row, Col, Button, Collapse, Icon } from 'antd';
import styles from './style.less';
import { axconst } from '@/shared/axconst';

const { Panel } = Collapse;
const { searchForm } = axconst;
/**
 * 自定义查询表单
 * @param form 表单
 * @param items 表单项
 * @param handleSearch 查询处理函数
 * @param handleResetSearch 重置查询处理函数
 * @param collapsible 是否可以展开
 * @param collapsed 默认是否是折叠的
 */
export class AxSearchForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsible: props.collapsible !== false,
      collapsed: props.collapsed === true,
      defaultActiveKey: props.collapsed === true ? [] : ['1'],
    };
  }

  handleSubmit = e => {
    const { form, handleSearch } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleSearch(e, fieldsValue);
    });
  };

  handleReset = () => {
    const { form, handleResetSearch } = this.props;
    form.resetFields();
    handleResetSearch();
  };

  genExtra = () => {
    const { collapsed } = this.state;
    return <span>{collapsed ? '展开' : '收起'}</span>;
  };

  handleChange = param => {
    this.setState({
      collapsed: param.length === 0,
    });
  };

  GenForm = () => {
    const { items } = this.props;
    return (
      <div className={styles.tableListForm}>
        <Form onSubmit={e => this.handleSubmit(e)} layout="inline">
          <Row gutter={searchForm.gutter}>
            {items.map((i, index) => (
              <Col key={index} {...searchForm.span}>
                {i}
              </Col>
            ))}
            {items && items.length <= 3 ? (
              <Col key={4} {...searchForm.span}>
                <span className={styles.submitButtons}>
                  <AxButton type="primary" htmlType="submit" icon='search'>
                    查询
                  </AxButton>
                  <AxButton
                    style={{
                      marginLeft: 8,
                    }}
                    onClick={this.handleReset}
                  >
                    重置
                  </AxButton>
                </span>
              </Col>
            ) : null}
          </Row>
          {items && items.length > 3 ? (
            <Row type="flex" justify="center">
              <Col>
                <span className={styles.submitButtons}>
                  <AxButton type="primary" htmlType="submit" icon='search'>
                    查询
                  </AxButton>
                  <AxButton
                    style={{
                      marginLeft: 8,
                    }}
                    onClick={this.handleReset}
                  >
                    重置
                  </AxButton>
                </span>
              </Col>
            </Row>
          ) : null}
        </Form>
      </div>
    );
  };

  render() {
    const { collapsible, defaultActiveKey } = this.state;
    const collapsePanelStyle = {
      border: 0,
      overflow: 'hidden',
    };
    return !collapsible ? (
      this.GenForm()
    ) : (
        <Collapse
          bordered={false}
          defaultActiveKey={defaultActiveKey}
          expandIconPosition="right"
          expandIcon={({ isActive }) => <Icon type="down" rotate={isActive ? 180 : 0} />}
          onChange={this.handleChange}
        >
          <Panel
            key="1"
            header={<span>&nbsp;</span>}
            extra={this.genExtra()}
            style={collapsePanelStyle}
            id="axCollapsePanel"
            className={styles.axCollapsePanel}
          >
            {this.GenForm()}
          </Panel>
        </Collapse>
      );
  }
}
